<template>
  <div class="audition69">
    <p>假定父盒子类名为box1，里面的子盒子类名为box2，实现目标box2在box1中水平垂直居中，即：</p>
    <code class="code">
      &lt;div class="box1"&gt;<br />
      <span class="indient">&lt;div class="box2"&gt; &lt;/div&gt;</span><br />
      &lt;/div&gt;
    </code>
    <hr>
    <h3>方法一：flex布局</h3>
    <p>不管box1和box2是否确定了宽高，都可以实现水平垂直居中效果</p>
    <code class="code">
      .box1 {<br />
        <span class="indient">display: flex;</span><br />
        <span class="indient">justify-content: center;</span><br />
        <span class="indient">align-items: center;</span><br />
      }
    </code>
    <p>---------------------------------------------------</p>
    <h3>方法二：grid布局</h3>
    <p>实现方法和flex类似，只不过是把<span class="color">display: flex;</span>换成<span class="color">display: grid;</span></p>
    <p>---------------------------------------------------</p>
    <h3>方法三：position定位</h3>
    <p>该方法需要注意的是，当box2没有固定宽度，且内容为文案时，box2的宽度是box1宽度的一半</p>
    <code class="code">
      .box1 {<br />
        <span class="indient">position: relative;</span><br />
      }<br />
      .box1 .box2 {<br />
        <span class="indient">position: absolute;</span><br />
        <span class="indient">left: 50%;</span><br />
        <span class="indient">top: 50%;</span><br />
        <span class="indient">transform: translate(-50%, -50%);</span><br />
      }
    </code>
    <p>---------------------------------------------------</p>
    <h3>方法四：margin</h3>
    <p>margin: auto;常用于盒子水平居中，当box1和box2高度确定时，给box2一定的marginTop值，可以实现水平垂直居中效果。但不常用。</p>
    <p>这里假定box1高度是200px,box2高度是50px</p>
    <code class="code">
      .box1 .box2 {<br />
        <span class="indient">margin: 75px auto 0;</span><br />
      }
    </code>
  </div>
</template>

<script>
export default {
  name: 'Audition69',
}
</script>

<style>

</style>